<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  #menu{
    /* display: none; */
    background-color: aqua;
    width: 60px;
    text-align: center;
    position: absolute;
  }
  #menu a{
    display: block;
    height: 50px;
    line-height: 50px;
    border: 1px black solid;
  }
  </style>
</head>
<body>
  <div id="menu">
    <a href="https://www.google.com/" id="google">google</a>
    <a href="https://www.baidu.com/" id="baidu">baidu</a>
  </div>
  <script>
    var menu = document.getElementById("menu");
    var google = document.getElementById("google");
    var baidu = document.getElementById("baidu");

    document.oncontextmenu = function (e) {
      e.preventDefault()
    }
    document.onmousedown = function (e) {
      console.log(e.button);
      if (e.button === 2) {
      var het = e.clientX;
      var whi = e.clientY;
      console.log(het);
      console.log(whi);
      menu.style.top = e.clientY+"px";
      menu.style.left = e.clientX+"px";
      menu.style.display = "block"
      }else if(e.button === 0){
        menu.style.display = "none"
      }
    }
    // console.log(menu.children);
    // // for (let i = 0; i < menu.children.length; i++) {
    // //   menu.children[i].onmousedown = function (e) {
    // //   menu.style.display = "none"
    // // }
    // // }
    // noda
  </script>
</body>
</html>